<template>
  <div>
    <!-- 顶部组件 -->
    <header-nav></header-nav>
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <span :class="{'swiper-slide':true, 'active':item==name}" @click="toggle" v-for="(item,index) in leftList" :key="index">{{item}}</span>
      </div>
    </div>






      <div v-for="item in nameList" :key="item.id">
          <!-- 使用 title 插槽来自定义标题 -->
          <template>
            <router-link class="van-cell-title" tag="div" :to="'/singersong?id='+item.id">
              <!-- <div class="van-cell-title" @click="sing(item.id)"> -->
                <van-image lazy-load width="45" height="45" :src="item.img1v1Url"/>
                <span class="custom-title">{{item.name}}</span>
              <!-- </div> -->
            </router-link>
          </template>
      </div>



  </div>
</template>

<script>
import {getArtistlist} from "../api/singer";
import headerNav from "../components/base/headerNav.vue"
import Swiper from 'swiper';
import Vue from 'vue';
import { Lazyload } from 'vant';

Vue.use(Lazyload);


export default {
  data(){
    return {
      leftList:["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"],
      rightList:[
        // {
        //   name:"A",
        //   data:[]
        // }
      ],
      nameList:[],
      name:'A',
    }
  },
  components:{
    headerNav
  },
  methods:{
    // // 获取歌手歌曲
    // sing(id){
    //   console.log(id)
    //   this.$router.push({name:'singersong',params:{id:id}})
    // },
    // 顶部导航栏
    ArtistListFun(){
      
      for(let i = 0;i<this.leftList.length;i++){
        this.rightList.push({
          name:this.leftList[i]
        })
      }
    },
    // 歌手数据
    jiazai(){
      // console.log(this.name)
      for(let i = 0 ; i < this.rightList.length;i++){
        if(this.rightList[i].name == this.name){
          this.nameList = this.rightList[i].data
        }
      }
      // console.log(this.nameList)
    },
    // 点击获取内容
    toggle(e){
      this.name = e.target.textContent;
      this.jiazai();
    }
  },
  created(){
    this.ArtistListFun();//构建对象
    

    for(let i = 0;i < this.leftList.length;i++){
      getArtistlist({
        type:1,
        area:96,
        initial:this.leftList[i]
      }).then(data=>{
          let index = this.rightList.findIndex(item=>item.name == this.leftList[i]);
          // console.log(index)
          // Vue.set( target, propertyName/index, value )
          //   向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。
          // this.rightList[index].data = data.artists; //不合理写法
          this.$set(this.rightList[index],'data',data.artists)
          
          // console.log(this.rightList);
      })
    }

  },
  watch:{
    rightList(){
      this.jiazai();
      // console.log(this.name)
    },
  },
  mounted(){
    new Swiper(".mySwiper", {
        slidesPerView: 10,
        spaceBetween: 0,
        freeMode: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });
  },
}
</script>

<style lang="less">
.van-cell-title{
  display: flex;
  align-items: center;
  padding: 5px 0px;
  margin: 0px 10px;
  border-bottom: 1px solid #999;
  span{
    margin-left:20px;
  }

}
.van-index-anchor{
  background-color: #D9DADB;
}
.mySwiper{
  overflow: hidden;
  span.swiper-slide{
    text-align: center;
    line-height: 37px;
    background-color: #d44439;
    color: rgb(204, 204, 204);
  }
  span.swiper-slide.active{
    background-color: red;
    color: white;
  }
}
</style>